<template>
    <div>
        <el-dialog :title="form.id > 0 ? '编辑' : '添加'" :visible.sync="info.isShow" @close="reset">
            <el-form :model="form" ref="cate" :rules="rules">
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择活动区域" prop="pid">
                        <el-option label="顶级分类" :value="0"></el-option>

                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 判断图片的pid -->
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
                    <el-input v-model="form.catename" autocomplete="off"></el-input>
                </el-form-item>

                <!-- 上传图片 -->
                <el-form-item v-if="form.pid != 0" label="分类图片" :label-width="formLabelWidth" prop="img">

                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="change" :limit="1"
                        :on-exceed="() => $message.error('文件只能上传一个哟')" :file-list="fileList" :on-preview="Preview"
                        :on-remove="onRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>

                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="单选框" :label-width="formLabelWidth" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="3">正常</el-radio>
                        <el-radio :label="6">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
// 引入
import { mapState, mapActions } from 'vuex';


export default {
    computed: {
        ...mapState("cate", ["catelist"])
    },
    data() {
        return {
            dialogFormVisible: true,
            dialogImageUrl: '',
            dialogVisible: false,
            radio: 3,
            form: {
                pid: "",
                catename: "",
                img: "",
                status: ""
            },
            rules: {
                pid: { required: true, message: "请选择上级分类", trigger: "blur" },
                catename: { required: true, message: "请输入分类名称", trigger: "blur" },
                img: { required: true, message: "请上传分类图片", trigger: "blur" },
                status: { required: true, message: "请选择菜单状态", trigger: "blur" }
            },
            formLabelWidth: '120px',
            fileList: [],
        };
    },
    methods: {
        ...mapActions("cate", ["getcatelist"]),
        reset() {
            this.info.isShow = false
            console.log("取消");
            // 清空表单信息
            this.form = {
                id: 0,
                catename: "",
                img: "",
                status: ""
            }
        },
        submit() {
            this.$refs.cate.validate(value => {
                if (value) {
                    console.log(this.form);
                    // console.log( this.$Api.cateadd(this.form));
                    this.$Api.cateadd(this.form).then(res => {

                        console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getcatelist()
                            // 调用reset取消函数
                            this.reset()
                        } else {
                            console.log(res);
                        }

                    })
                    // return
                } else {
                    console.log(11234341);
                }
            })
        },
        // 图片改变时
        change(file, fileList) {
            console.log(file, fileList, 12332145664586);
            this.form.img = file.raw
        },
        setInfo(add) {
            this.form = {
                ...add
            };
            console.log(add, 123);
            this.fileList.push({
                url: add.img
            })
        },

        // 图片预览
        Preview(file) {
            console.log(file, 123132465);
        },
        // 图片移除
        onRemove(file, fileList) {
            console.log(file, fileList, 10086);
        }


    },
    mounted() {
        this.getcatelist()
    },
    props: ["info"]

}

</script>


<style leng='less' scoped>

</style>